@import '~static/sass/mixin'
@import '~static/sass/color'
@import '~static/sass/var'

.container
  
  .focusCharacters-header
    position: relative
    height: 8rem
    margin-bottom: $spacing

    .focusCharacters-header-bg
      width: 100%
      position: absolute
      top: 0
      left: 0
      filter: brightness(80%) opacity(50%) grayscale(70%)
      -webkit-filter: brightness(80%) opacity(50%) grayscale(70%)
    
    .focusCharacters-media
      width: 100%
      height: 70%
      padding: 0 $spacing
      +border-box
      position: absolute
      bottom: 0
      left: 0
      z-index: 2
      font-size: 0
      
      > *
        display: inline-block
        vertical-align: middle
        height: 100%
      
      img
        max-width: 40%

      .focusCharacters-text
        width: 60%
        +font-dpr(10px)
        position: relative

        > *
          position: absolute

        .names
          color: $white
          line-height: 230%
          top: 30%
          left: $spacing

          .cname
            font-size: 2.1em

          .name
            font-size: 1.7em
        
        .allegiances
          color: $grey-600
          left: $spacing
          bottom: $spacing / 3
          font-size: 1.6em

        .born
          font-size: 1.2em
          padding: 5px $spacing
          color: $white
          background-color: $grey-400
          left: $spacing
          bottom: 0

  .focusCharacters-body
    +border-box
    +font-dpr(10px)
    
    >*:not(.focusCharacter-stills)
      padding: 0 $spacing

    .focusCharacters-intro
      font-size: 2em
      text-indent: 2em
      color: $grey-600

    .focusCharacter-stills
      +x-scroll
      padding: $spacing 0 $spacing $spacing
        
      img
        width: 80%
        max-height: 5rem
      
      img:not(:last-child)
        margin-right: $spacing/2

    .focusCharacter-item

      .focusCharacter-item-title
        font-size: 2.2em
        border-bottom: 1px solid $grey-400
        padding-bottom: $spacing / 3

      .focusCharacter-item-body
        text-indent: 2em
        font-size: 1.7em
        color: $grey-600
        margin: $spacing 0